<template>
	<div class="page flex-column h-100" v-resize="onResize">
		<van-nav-bar
			left-arrow
			:right-text="detail.inherit_id < 0 ? '' : '编辑'"
			title="会员详情"
			@click-left="goBack"
			@click-right="toEdit"
		/>
		<div class="page-container" ref="container">
			<div class="head">
				<div class="top" />
				<div class="bottom" />
			</div>
			<div class="flex-column h-100 page-body">
				<!-- 会员信息 start -->
				<div class="info">
					<cl-avatar class="avatar" :src="detail.cus_sex == 2 ? womenImg : menImg" />
					<img
						class="level"
						:src="require('@/assets/img/' + (detail.cus_grade_sort || 1) + '.png')"
					/>
					<div class="nickname flex flex-justify-center flex-align-center">
						<div class="ellipsis">
							{{ detail.cus_name }}
						</div>
						<img class="sex" :src="detail.cus_sex == 2 ? girlImg : boyImg" />
						<div class="haveFan" v-if="Number(detail.inherit_id)">重</div>
					</div>
					<el-row :gutter="10" class="more">
						<el-col :span="12" class="flex">
							<label>手机号：</label>
							<span class="ellipsis">{{ detail.cus_mobile | privacyPhone }}</span>
						</el-col>
						<el-col :span="12" class="flex">
							<label>客单价：</label>
							<span class="ellipsis">{{ detail.kedan || 0 }} 元</span>
						</el-col>
						<el-col :span="12" class="flex">
							<label>欠款：</label>
							<span class="ellipsis">{{ detail.rest_amount || 0 }} 元</span>
						</el-col>
						<el-col :span="12" class="flex">
							<label />
							<span class="ellipsis"
								>已
								<em>{{ detail.to_last_shop_time }}</em>
								天未到店
							</span>
						</el-col>
					</el-row>
					<!-- 会员标签 -->
					<ul
						class="tags flex flex-justify-center"
						v-if="detail.tag_name && detail.tag_name.length"
					>
						<li v-for="(tag, idx) in detail.tag_name" :key="idx">
							{{ tag.tname || "-" }}
						</li>
					</ul>
				</div>
				<!-- 会员信息 end -->
				<van-tabs
					ref="tabs"
					class="type-tabs"
					color="var(--color-primary)"
					title-active-color="var(--color-primary)"
					line-width="0.52rem"
					line-height="0.06rem"
					v-model="activeTab"
					@change="tabChange"
				>
					<van-tab
						v-for="item in tabs"
						:key="item.name"
						:title="item.title"
						:name="item.name"
					/>
				</van-tabs>
				<div class="flex-1" style="overflow: hidden">
					<keep-alive>
						<template v-for="item in tabs">
							<component
								:is="item.name"
								:key="item.name"
								:detail="detail"
								v-if="activeTab == item.name"
							/>
						</template>
					</keep-alive>
				</div>
			</div>
		</div>
		<!-- 悬浮按钮 -->
		<cl-float-ball
			v-if="!Number(detail.inherit_id)"
			class="float-btn"
			:clientHeight="clientH"
			@click="showPopup = true"
		>
			<i class="el-icon-more" />
		</cl-float-ball>
		<van-popup
			v-model="showPopup"
			round
			position="bottom"
			class="more-popup"
			:style="{ height: '5rem' }"
			:duration="0.2"
			safe-area-inset-bottom
		>
			<div class="h-100 flex-column">
				<div class="flex-1 popup-body">
					<div class="flex flex-wrap">
						<div
							class="flex-column flex-justify-between flex-align-center more-item"
							v-for="(item, idx) in moreList"
							:key="idx"
							@click="clickMoreItem(item)"
						>
							<div class="icon" :style="{ background: item.color }">
								<icon-svg size="0.45rem" :name="item.icon" />
							</div>
							<span>{{ item.text }}</span>
						</div>
					</div>
				</div>
				<div class="popup-cancel" @click="showPopup = false">取 消</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
import { NavBar, Tab, Tabs, Popup, Dialog } from "vant";
import womenImg from "@/assets/img/women.png";
import menImg from "@/assets/img/men.png";
import girlImg from "@/assets/img/girl.png";
import boyImg from "@/assets/img/boy.png";
import AppointList from "./components/detail/appoint-list";
import DepositList from "./components/detail/deposit-list";
import CusInfo from "./components/detail/cus-info";

const tabs = [
	{ title: "预约", name: "appoint-list" },
	{ title: "定金", name: "deposit-list" },
	{ title: "信息", name: "cus-info" }
];
export default {
	name: "MobileCusDetail",
	components: {
		VanNavBar: NavBar,
		VanTab: Tab,
		VanTabs: Tabs,
		VanPopup: Popup,
		AppointList,
		DepositList,
		CusInfo
	},
	data() {
		return {
			womenImg,
			menImg,
			girlImg,
			boyImg,
			detail: {},
			clientH: 600,
			showPopup: false,
			activeTab: "",
			tabs,
			moreList: [
				{
					text: "预约",
					color: "#5CD7B2",
					icon: "icon-appoint",
					url: "/mobile/cus/appoint"
				},
				{
					text: "定金",
					color: "#FE67C3",
					icon: "icon-deposit",
					url: "/mobile/cus/deposit"
				},
				{
					text: "新增重粉",
					color: "#67c23a",
					icon: "add-customer",
					url: "/mobile/cus/form"
				},
				{
					text: "拨打",
					color: "#FF6783",
					icon: "makecall"
				}
			]
		};
	},
	mounted() {
		const { query } = this.$route;
		this.detail = { ...query };
		this.activeTab = query.tabbar ?? tabs[0].name;
		this.getDetail();
		this.checkaddOpera();
		this.onResize();
	},
	methods: {
		onResize() {
			this.$nextTick(() => {
				const tabs = this.$refs.tabs;

				const container = this.$refs.container;

				if (tabs) {
					tabs.resize();
				}
				if (container) {
					this.clientH = container.clientHeight;
				}
			});
		},
		goBack() {
			this.$router.go(-1);
		},
		// 会员编辑
		toEdit() {
			const { inherit_id } = this.detail;
			if (inherit_id > 0) return;
			this.$router.push({
				path: "/mobile/cus/edit",
				query: this.detail
			});
		},
		tabChange(v) {
			const { query, path } = this.$route;
			this.$router.replace({
				path,
				query: {
					...query,
					tabbar: v
				}
			});
		},
		async clickMoreItem(item) {
			this.showPopup = false;
			const { cus_id, biz_id, cus_name, cus_mobile, cus_type, dept_id } = this.detail;
			let query = {
				cus_id,
				biz_id,
				cus_name,
				cus_mobile,
				cus_type,
				dept_id,
				from_page: "MobileCusDetail"
			};
			if (item.text == "新增重粉") {
				this.$router.push({
					path: item.url,
					query: {
						...query,
						form_type: "repeat"
					}
				});
				return;
			}
			if (!cus_mobile || !dept_id) {
				const promptStr =
					!cus_mobile && !dept_id
						? "“所属门店”和“手机号”"
						: !cus_mobile
						? "手机号"
						: "所属门店";
				Dialog.confirm({
					title: "提示",
					message: `客户信息未完善，请完善客户的${promptStr}后再进行预约!`,
					confirmButtonColor: "#156DFF"
				})
					.then(() => {
						this.toEdit();
					})
					.catch(() => {});
				return;
			}

			if (item.text == "预约") {
				let res = await this.checkaddOpera();
				if (res.length) {
					Dialog.confirm({
						title: "提示",
						message: "当前已存在一笔预约，是否改约?",
						confirmButtonColor: "#156DFF"
					})
						.then(() => {
							this.toAppoint(res[0], "edit");
						})
						.catch(() => {});
					return;
				}
				// const { total } = await this.$service.deposit.userInfo({
				// 	cus_id
				// });
				// if (Number(total) <= 0) {
				// 	//需要下定金
				// 	Dialog.confirm({
				// 		title: "提示",
				// 		message: "需要先下定金！",
				// 		confirmButtonColor: "#156DFF"
				// 	})
				// 		.then(() => {
				// 			this.$router.push({
				// 				path: "/mobile/cus/deposit",
				// 				query: {
				// 					...query,
				// 					isHaveyy: true,
				// 					form_type: "add"
				// 				}
				// 			});
				// 		})
				// 		.catch(() => {});
				// 	return;
				// }
				this.toAppoint(query);
				return;
			}
			if (item.text == "拨打") {
				const data = await this.$service.clue.getVmphone({
					id: cus_id,
					type: "customer"
				});
				window.location.href = `tel:${data.virtualMobile}`;
				return;
			}
			this.$router.push({
				path: item.url,
				query: {
					...query,
					form_type: "add"
				}
			});
		},
		toAppoint(data = {}, type = "add") {
			this.$router.push({
				name: "MobileCusAppoint",
				query: {
					...data,
					service_info: JSON.stringify(data.service_info),
					form_type: type,
					from_page: "MobileCusDetail"
				}
			});
		},
		// 获取详情
		async getDetail() {
			const { cus_id } = this.$route.query;
			const { info } = await this.$service.customer.detail({
				cus_id,
				biz_id: 0
			});
			this.detail = {
				...info,
				base_wx: atob(info.base_wx ?? "")
			};
			this.activeTab = tabs[0].name;
		},
		// 判断会员是否存在一笔预约
		async checkaddOpera() {
			const { cus_id } = this.detail;
			const { list } = await this.$service.cart
				.page({
					cus_id,
					search_content: cus_id,
					search_type: 7,
					status: 1
				})
				.catch(() => ({ list: [] }));
			// console.log("获取预约订单列表", list);
			return list;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.van-nav-bar {
		background: linear-gradient(135deg, $primary, rgba(111, 92, 229, 0.98));
		&::after {
			border-color: transparent;
		}
		.van-icon,
		&__title,
		&__text {
			color: #fff;
		}
	}
}

.page {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	.head {
		width: 100%;
		position: absolute;
		.top {
			width: 100%;
			height: 2rem;
			background: linear-gradient(135deg, $primary, rgba(111, 92, 229, 0.98));
		}

		.bottom {
			border-top: 1rem solid $primary;
			border-right: 8rem solid transparent;
			height: 0;
		}
	}
	&-container {
		position: relative;
		overflow: hidden;
		flex: 1;
	}

	&-body {
		// z-index: 100;
		position: relative;
		overflow: hidden;
		.head {
			z-index: -1;
		}
		// 客户信息
		.info {
			position: relative;
			box-sizing: border-box;
			margin: 1rem 0.3rem 0.3rem;
			padding: 0.7rem 0.3rem 0.15rem;
			background: #ffffff;
			border-radius: 0.2rem;
			box-shadow: 0 0.05rem 0.2rem 0 rgba(0, 0, 0, 0.15);
			// 头像
			.avatar {
				height: 1.4rem;
				width: 1.4rem;
				position: absolute;
				top: -0.7rem;
				left: 50%;
				transform: translateX(-50%);
				.cl-avatar {
					height: 100%;
					width: 100%;
				}
			}
			// 等级
			.level {
				position: absolute;
				top: 0.36rem;
				left: 50%;
				transform: translateX(-50%);
				width: 1.1rem;
				height: 0.36rem;
			}
			// 昵称
			.nickname {
				padding: 0.25rem 0;
				line-height: 1;
				font-size: 0.3rem;
				color: #333;
				font-weight: bold;
				.sex {
					margin-left: 0.2rem;
					width: 0.32rem;
					height: 0.32rem;
				}
				.haveFan {
					width: 0.32rem;
					height: 0.32rem;
					font-size: 0.22rem;
					background: $color-primary;
					border-radius: 50%;
					color: #fff;
					margin-left: 0.1rem;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.more {
				font-size: 0.24rem;
				color: #666;
				.el-col {
					margin-bottom: 0.1rem;
					label {
						width: 38%;
						display: inline-block;
						text-align: right;
						color: #cdcdcd;
					}
					span {
						flex: 1;
					}
					em {
						color: #ff3e75;
						font-style: normal;
					}
				}
			}
			// 标签
			.tags {
				margin-top: 0.1rem;
				line-height: 1;
				font-size: 0.2rem;

				li {
					color: $primary;
					background-color: #f3f3f3;
					height: 0.42rem;
					line-height: 0.42rem;
					border-radius: 0.21rem;
					margin-bottom: 0.2rem;
					padding: 0 0.16rem;
					+ li {
						margin-left: 0.2rem;
					}
				}
			}
		}
		.type-tabs {
			// tab切换
			::v-deep .van-tabs__wrap {
				height: 0.88rem;
				border-bottom: 0.01rem solid #ebedf0;
				.van-tab {
					line-height: 0.8rem;
					font-size: 0.32rem;
					&--active {
						font-weight: bold;
					}
				}
			}
		}
		::v-deep .list {
			box-sizing: border-box;
			padding: 0.3rem;
			padding-bottom: 1rem;
			height: 100%;
			overflow: auto;
			> li {
				background: #fff;
				padding: 0.27rem;
				border-radius: 0.1rem;
				margin-bottom: 0.3rem;
				font-size: 0.28rem;
			}
			.status {
				font-size: 0.22rem;
				color: $primary;
				background: mix(#fff, $primary, 90%);
				border: 0.01rem solid $primary;
				border-radius: 0.05rem;
				padding: 0.12rem 0.15rem;
				line-height: 1;
				&.success {
					color: #0cb45f;
					background: mix(#fff, #0cb45f, 90%);
					border-color: #0cb45f;
				}
				&.danger {
					color: #ff3e57;
					background: mix(#fff, #ff3e57, 90%);
					border-color: #ff3e57;
				}
				&.info {
					color: #666;
					background: mix(#fff, #666, 90%);
					border-color: mix(#fff, #666, 40%);
				}
				&.warning {
					color: #fe8f30;
					background: mix(#fff, #fe8f30, 90%);
					border-color: #fe8f30;
				}
			}
			.remark {
				margin-top: 0.16rem;
				padding: 0 0.18rem;
				background: #f3f3f3;
				color: #666;
				font-size: 0.2rem;
				line-height: 0.56rem;
				border-radius: 0.28rem;
			}
			.opts {
				button {
					box-sizing: border-box;
					margin-top: 0.26rem;
					padding: 0 0.36rem;
					height: 0.56rem;
					line-height: 0.54rem;
					border-radius: 0.28rem;
					border: 0.01rem solid transparent;
					font-size: 0.26rem;
					+ button {
						margin-left: 0.2rem;
					}
					&.primary {
						color: $primary;
						background: mix(#fff, $primary, 90%);
						border-color: $primary;
					}
					&.danger {
						color: #ff3e57;
						background: mix(#fff, #ff3e57, 90%);
						border-color: #ff3e57;
					}
					&.info {
						color: #777;
						background: mix(#fff, #666, 90%);
						border-color: mix(#fff, #666, 40%);
					}
				}
			}
		}
	}
}
// 悬浮按钮
.float-btn {
	i {
		transform: rotate(90deg);
		font-size: 0.5rem;
	}
}
// 更多弹出
.more-popup {
	.popup-body {
		box-sizing: border-box;
		padding: 0.4rem 0.25rem;
	}
	.more-item {
		width: 25%;
		height: 1.3rem;
		text-align: center;
		font-size: 0.28rem;
		.icon {
			color: #fff;
			height: 0.88rem;
			width: 0.88rem;
			line-height: 1rem;
			border-radius: 0.1rem;
		}
	}
	.popup-cancel {
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		border-top: 0.01rem solid #dfdfdf;
		color: #999;
		font-size: 0.3rem;
	}
}
</style>
